import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Modal, Toast,List } from 'antd-mobile';
// import MyHeaderWrap from '@components/My/My/MyHeaderWrap'
import MyOrder from '../../../components/My/MyOrder/index'
import TextHeaderWithoutNav from '../../../components/Headers/TextHeaderWithNav/index'
// import $ from 'jquery'
// import {baseUrl,getToken,getJSsdkParams} from '@common/js/util.js'
import './my.scss'
// import QRCode from 'qrcode'
// import wx from 'wechat-js-sdk'
import MyInfo from '../../../components/My/MyInfo/myInfo'
import {changePath} from "../../../actions/routerAction";

@connect(
    null,
    {changePath}
)
class MineCenter extends Component {
    constructor(props) {
        super(props);
        this.state={
            userInfo:{},
            clicked: 'none',
            code:'',
            /*dataList:[
                // { url: 'apay.png', title: '支付宝' },
                // { url: 'weibo.png', title: '新浪微博' },
                { url: 'shenghuoquan.png', title: '朋友圈' },
                { url: 'weixin.png', title: '微信好友' },
                // { url: 'qq.png', title: 'QQ' }
            ].map(obj => ({
                icon: <img src={require(`@common/images/${obj.url}`)} alt={obj.title} style={{ width: 36 }} />,
                title: obj.title,
            })),*/
            jssdk:{},
            QRcodeShow:false,
            linkPage:[
                {thumb:require('../../../assets/myCenter/shenqing.svg'),title:'申请成为推广大使',clickFunc:()=>{this.goto('/my/applyForShare')}},
                {thumb:require('../../../assets/myCenter/erweima.svg'),title:'我的推广二维码',clickFunc:()=>{this.showShareActionSheet()}},
                {thumb:require('../../../assets/myCenter/paihangbang.svg'),title:'推广大使排行榜',clickFunc:()=>{this.goto('/my/PointsRank')}},
                {thumb:require('../../../assets/myCenter/jifen.svg'),title:'我的积分',clickFunc:()=>{this.goto('/my/integral')}},
                {thumb:require('../../../assets/myCenter/shoucang.svg'),title:'我的收藏',clickFunc:()=>{this.goto('/my/myFavorate')}},
            ]
        }
    }
    //跳转
    goto(path){
        this.props.history.push(path)
        this.props.changePath(path)
    }
    //弹起分享
    showShareActionSheet(){
        this.setState({
            QRcodeShow:true
        })
    }
    //获取用户信息
    getUserInfo(cb){
        // if(getToken()){
        //     let that = this
        //     let params = {
        //         token:getToken()
        //     }
        //     $.ajax({
        //         type:'post',
        //         url:baseUrl+'/getfocusUserMessage',
        //         data:params,
        //         dataType:'json',
        //         async:false,
        //         success(res){
        //             if(res.code===0){
        //                 res.data.balance=res.data.balance.toFixed(2)
        //                 that.setState({
        //                     userInfo:res.data
        //                 },()=>{
        //                     cb&&cb()
        //                 })
        //             }
        //         },
        //         error(err){
        //             Toast.info('获取失败',1)
        //         }
        //     })
        // }
    }
    codeImg(){
        let that = this
        // QRCode.toDataURL('http://chaoliu.huibada.cn/mc-shopping/index.html?userId='+this.state.userInfo.fansId).then(url => {
        //     that.setState({
        //         code:url
        //     })
        // })
    }
    getJSsdk(cb){
        let that = this
        // getJSsdkParams((res)=>{
        //     that.setState({
        //         jssdk:res.data
        //     },()=>{
        //         cb&&cb()
        //     })
        // })
    }
    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }
    //挂载组件
    componentDidMount(){
        let that=this
        this.getUserInfo(()=>{
            // that.getJSsdk(()=>{
            //     wx.config({
            //         debug: false,
            //         appId: that.state.jssdk.appId,
            //         timestamp: that.state.jssdk.timestamp,
            //         nonceStr: that.state.jssdk.nonceStr,
            //         signature: that.state.jssdk.signature,
            //         jsApiList: [
            //             'checkJsApi',
            //             'onMenuShareTimeline',
            //             'onMenuShareAppMessage'
            //         ]
            //     })
            //     var fansId=that.state.userInfo.fansId;
            //     var img = 'http://exotic.gzfenzu.com/group1/M00/00/24/rBKok1rhP_iAKd7cAAO3P_-cEtk152.png'
            //     var link = `http://chaoliu.huibada.cn/mc-shopping/index.html?userId=${fansId}`;
            //     var desc = '榴莲商城 新鲜水果网购';
            //     wx.ready(()=>{
            //         //分享到朋友圈接口
            //         wx.onMenuShareTimeline({
            //             imgUrl:img,
            //             link:link,
            //             desc:desc,
            //             title:"榴莲商城",
            //             success() {
            //                 $.ajax({
            //                     type:'post',
            //                     data:{
            //                         token:getToken(),
            //                         type:1,
            //                         monetary:0,
            //                         recommendId:''
            //                     },
            //                     url:baseUrl+'/point/share',
            //                     success(res){
            //                         Toast.info('分享成功',);
            //                         window.location.reload()
            //                     }
            //                 })
            //             },
            //             cancel() {
            //                 console.log("取消分享");
            //             },
            //             fail(res) {
            //                 console.log(JSON.stringify(res));
            //             }
            //         })
            //         //分享到朋友
            //         wx.onMenuShareAppMessage({
            //             imgUrl:img,
            //             link:link,
            //             desc:desc,
            //             title:"榴莲商城",
            //             success() {
            //                 $.ajax({
            //                     type:'post',
            //                     data:{
            //                         token:getToken(),
            //                         type:1,
            //                         monetary:0,
            //                         recommendId:''
            //                     },
            //                     url:baseUrl+'/point/share',
            //                     success(res){
            //                         Toast.info('分享成功',);
            //                         window.location.reload()
            //                     }
            //                 })
            //             },
            //             cancel() {
            //                 console.log("取消分享");
            //             },
            //             fail(res) {
            //                 console.log(JSON.stringify(res));
            //             }
            //         })
            //     })
            // })
        })
    }
    render() {
        return (
            <div className="my-page">
                <Modal
                    visible={this.state.QRcodeShow}
                    transparent
                    maskClosable={false}
                    style={{width:'300px'}}
                    onClose={this.onClose('QRcodeShow')}
                    title="我的推广二维码"
                    footer={[{ text: 'Ok', onPress: () => { this.onClose('QRcodeShow')(); } }]}
                >
                    <img style={{width:'250px'}} src={require('../../../assets/qrcode.jpeg')} alt=""/><br/>
                    <span>推广享提成</span>
                </Modal>
                <TextHeaderWithoutNav title="个人中心"></TextHeaderWithoutNav>
                <div className="my-main">
                    <MyInfo userInfo={this.state.userInfo} goto={this.goto.bind(this)}></MyInfo>
                    <MyOrder></MyOrder>
                    <List>
                        {this.state.linkPage.map((v,i)=>(
                            <>
                                <List.Item
                                    key={i}
                                    className='my-center-list-item'
                                    thumb={v.thumb}
                                    onClick={v.clickFunc}
                                    arrow='horizontal'
                                >
                                    {v.title}
                                </List.Item>
                            </>
                        ))}
                    </List>
                </div>
            </div>
        )
    }
}

export default MineCenter